Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*,
*::before,
*::after {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #777777;
	overflow: hidden;
	background-image: linear-gradient(145deg, rgba(255, 255, 220, 1), rgba(255, 255, 220, 0) 66%),
		linear-gradient(220deg, rgba(30, 45, 70, 0.75), rgba(30, 45, 70, 0) 70%);
	&::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		z-index: -1;
		background: linear-gradient(to top, #707070 33%, #ffffff33 100%);
	}
}
#ball {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	animation: rolling 5s infinite linear;

&::before {
		content: "";
		display: block;
		position: absolute;
		bottom: -5px;
		left: 25px;
		width: 200px;
		height: 30px;
		border-radius: 50%;
		background-image: radial-gradient(ellipse at 35% 75%, #000000 10%, #00000000 70%);
		z-index: -1;
	}
	&::after {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: #f090f0;
		background-image: radial-gradient(
				circle,
				#ffffff,
				#ffffff77 10%,
				#ffffff00 calc(10% + 1px),
				#ffffff00 20%,
				#ffffff77 calc(20% + 1px),
				#ffffff77 30%,
				#ffffff00 calc(30% + 1px),
				#ffffff00 40%,
				#ffffff77 calc(40% + 1px),
				#ffffff77 50%,
				#ffffff00 calc(50% + 1px),
				#ffffff00 60%,
				#ffffff77 calc(60% + 1px),
				#ffffff77 70%,
				#ffffff00 calc(70% + 1px),
				#ffffff00 80%,
				#ffffff77 calc(80% + 1px),
				#ffffff77 90%,
				#ffffff00 calc(90% + 1px),
				#ffffff00 100%
			),
			conic-gradient(red, orange, yellow, green, blue, red);
		background-size: 200% 200%;
		z-index: -1;
		background-position: 30% 25%;
		animation: insetRolling 5s linear infinite;
	}

#shadows3D {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		box-shadow: inset -10px -10px 20px #333333bb, inset 5px 5px 15px #ffffff99, inset 10px 10px 20px #ffffff55, inset -5px 5px 10px rgba(30, 45, 70, 0.25),
			inset -3px -5px 10px #00000099;
		background: radial-gradient(circle at 20% 20%, rgba(255, 255, 200, 0.5), rgba(255, 255, 200, 0) 33%);
	}
	top: -50p;
}

@keyframes rolling {
	0% {
		transform: translateX(-80vw);
	}
	100% {
		transform: translateX(80vw);
	}
}

@keyframes insetRolling {
	0% {
		transform: rotate(0deg);
		background-position: 40% 35%;
	}
	45% {
		background-position: 20% 15%;
	},
  50% {
    transform: rotate(180deg);
  },
  55% {
    background-position: 20% 15%;
  }
	100% {
		transform: rotate(360deg);
		background-position: 40% 35%;
	}
}

Frontend Forever App